<!DOCTYPE html>
<html lang="zh">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<head>
    <title>WebSocket 页面</title>
</head>
<body>
<h1>WebSocket Simple Demo</h1>

<p>登录用户名：</p>
<input type="text" id="usernameInput" />
<button onclick="login()" id = "login">登录</button>
<button onclick="logout()" id = "logout">退出登录</button>
<p>输入要发送的消息（eg. tom:msg 给tom发送msg）：</p>
<input type="text" id="messageInput" />
<button onclick="sendMessage()" id="send">发送</button>

<p>接收到的消息：</p>
<button onclick="clearMsg()">清空消息</button>
<div id="messageOutput"></div>

<script>

    document.getElementById('login').disabled = false;
    document.getElementById('logout').disabled = true;
    document.getElementById('send').disabled = true;
    let ws; // 全局变量存储 WebSocket 连接

    // 连接 WebSocket
    function login() {
        const username = document.getElementById('usernameInput').value;
        if (username === null || username.trim() === '') {
            alert('请输入用户名！');
            return
        } else {
            // 用户名有效，进行其他操作
            console.log(`用户名是：${username}`);
        }
        document.getElementById('login').disabled = true;
        document.getElementById('logout').disabled = false;
        document.getElementById('send').disabled = false;
        ws = new WebSocket('ws://localhost:8080/simple/' + username);

        // 连接成功
        ws.onopen = function(event) {
            alert("登录成功")
        };
        ws.onclose = function(event) {
            document.getElementById('usernameInput').value = '';
            document.getElementById('login').disabled = false;
            document.getElementById('logout').disabled = true;
            document.getElementById('send').disabled = true;
        }

        // 收到消息
        ws.onmessage = function(event) {
            const message = event.data;
            document.getElementById('messageOutput').innerHTML += message + '<br>';
        };

        // 连接错误
        ws.onerror = function(event) {
            console.error('WebSocket 连接错误！');
        };
    }

    function clearMsg() {
        document.getElementById('messageOutput').innerHTML  = '';
    }

    // 退出登录
    function logout() {
        if (ws && ws.readyState === WebSocket.OPEN) {
            ws.close()  // 连接关闭
            document.getElementById('usernameInput').value = '';
            document.getElementById('login').disabled = false;
            document.getElementById('logout').disabled = true;
            document.getElementById('send').disabled = true;
            alert("退出成功")
        } else {
            console.warn('WebSocket 连接未建立，无法发送消息');
        }
    }

    // 发送消息
    function sendMessage() {
        const message = document.getElementById('messageInput').value;
        if (ws && ws.readyState === WebSocket.OPEN) {
            ws.send(message);
            document.getElementById('messageInput').value = '';
        } else {
            console.warn('WebSocket 连接未建立，无法发送消息');
        }
    }
</script>
</body>
</html>
